<template>
	<view style="margin-bottom: 20rpx;">
		<view v-show="isShowToolButton">{{item.templateTypeName}}</view>

		<!-- 根据类型选择模版 -->
		<view class="toolButton" v-if="isShowToolButton"
			style="margin-bottom: 10rpx;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">

			<view @click="add" v-if="item.templateTypeName=='纵向瀑布流'"
				style="width: 128rpx;height: 64rpx;text-align: center; line-height: 64rpx; background-color: black;margin-right: 10rpx;border-radius: 10rpx;color:white">
				新增</view>

			<view @click="deleteItem"
				style="width: 128rpx;height: 64rpx;text-align: center; line-height: 64rpx; background-color: black;margin-right: 10rpx;border-radius: 10rpx;color:white">
				删除</view>
			<view @click="moveTop"
				style="width: 128rpx;height: 64rpx;text-align: center; line-height: 64rpx; background-color: black;margin-right: 10rpx;border-radius: 10rpx;color:white">
				上移</view>
			<view @click="moveDown"
				style="width: 128rpx;height: 64rpx;text-align: center; line-height: 64rpx; background-color: black;margin-right: 10rpx;border-radius: 10rpx;color:white">
				下移</view>

		</view>

		<!-- 四方格 -->
		<block v-if="item.templateTypeName =='四方格'">

			<view style="width: 100%; display: grid; grid-gap:10rpx;grid-template-columns: repeat(2, 50%);">
				<view v-for="(v,index) in item.products" :key="index" @click="typeDetailClick(item,index)" style="">
					<image :src="v.imgSrc" mode="aspectFill" alt=""
						style="width: 339rpx;height: 320rpx;border: 1px dotted gainsboro;">

						<view class="">
							<text>{{v.name}}</text>
							<view class="flex-row-start" style="" v-if="isHasInviteCode" >
								<text v-show="v.price"
									style="margin-right: 20rpx;color: #9CA3AF; font-size: 28rpx;text-align: center;text-decoration:line-through">
									¥{{v.price}}</text>
								<text v-show="v.discount"
									style="background: rgba(255, 77, 79, 0.1);font-size: 24rpx;width: 80rpx;width: 95rpx;height: 40rpx;text-align: center;">{{v.discount*10}}折</text>
							</view>
							<view class="flex-row-start" style="" v-else>
								<text v-show="v.price" style="margin-right: 20rpx;color: #FF4D4F;font-size: 32rpx;">¥ {{v.price}}</text>
							</view>
						</view>


				</view>
			</view>
		</block>
		<!-- 轮播图 -->
		<block v-else-if="item.templateTypeName =='轮播图'">


			<!-- 	<view style="width: 100%; display: flex;flex-direction: row;justify-content: flex-start;align-items: center;overflow-x: scroll;">
				<view v-for="(v,index) in item.products" :key="index" @click="typeDetailClick(item,index)" style="width: 100vw;box-sizing: border-box;margin-right: 10rpx;">
					<image :src="v.imgSrc" alt="" style="width: 100vw;;height: 320rpx;" mode="aspectFill">
					<text>{{v.productName}}</text>
				</view>
			</view> -->


			<bw-swiper :swiperList="item.products" swiperHeight="320" imageKey="imgSrc"
				style="width:100%;height: 320rpx;" @clickItem="clickItem" :textTip="true"></bw-swiper>

		</block>

		<!-- 横向滑动 -->
		<block v-else-if="item.templateTypeName =='横向瀑布流'">

			<view
				style="box-sizing: border-box;height: 340rpx;display: flex; flex-direction: row; justify-content: flex-start;align-items:center ;overflow: scroll;">

				<view v-for="(v,index) in item.products" :key="index" @click="typeDetailClick(item,index)"
					style="height: 100%;width: 252rpx;margin-right: 22rpx;box-sizing: border-box;"
					class="flex-colum-between">
					<image :src="v.imgSrc" alt="" style="width: 252rpx;height: 248rpx;" />
					<view class="" style="width: 100%;">
						<text>{{v.name}}</text>
						<view class="flex-row-start" style="width: 100%;" v-if="isHasInviteCode">
							<text v-show="v.price"
								style="margin-right: 20rpx;color: #9CA3AF; font-size: 28rpx;text-align: center;text-decoration:line-through">
								¥{{v.price}}</text>
							<text v-show="v.discount"
								style="background: rgba(255, 77, 79, 0.1);font-size: 24rpx;width: 80rpx;width: 95rpx;height: 40rpx;text-align: center;">{{v.discount*10}}折</text>
						</view>
						<view class="flex-row-start" style="" v-else>
							<text v-show="v.price" style="margin-right: 20rpx;color: #FF4D4F;font-size: 32rpx;">¥ {{v.price}}</text>
						</view>
					</view>
				</view>

			</view>


		</block>

		<!-- 瀑布流 -->
		<block v-else-if="item.templateTypeName =='纵向瀑布流'">

			<view style="width: 100%; display: grid; grid-gap:10rpx;grid-template-columns: repeat(2, 50%);">
				<view v-for="(v,index) in item.products" :key="index" @click="typeDetailClick(item,index)" style="">
					<image :src="v.imgSrc" alt="" style="width: 339rpx;height: 320rpx;border: 1px dotted gainsboro;" />
					<view class="">
						<text>{{v.name}}</text>
						<view class="flex-row-start" style="" v-if="isHasInviteCode">
							<text v-show="v.price"
								style="margin-right: 20rpx;color: #9CA3AF; font-size: 28rpx;text-align: center;text-decoration:line-through">
								¥{{v.price}}</text>
							<text v-show="v.discount"
								style="background: rgba(255, 77, 79, 0.1);font-size: 24rpx;width: 80rpx;width: 95rpx;height: 40rpx;text-align: center;">{{v.discount*10}}折</text>
						</view>
						<view class="flex-row-start" style="" v-else>
							<text v-show="v.price" style="margin-right: 20rpx;color: #FF4D4F;font-size: 32rpx;">¥ {{v.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>

	</view>
</template>


<script>
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue'

	export default {
		components: {

			bwSwiper

		},
		name: "yingyingtang-template-component",
		data() {
			return {

			};
		},
		computed: {
			isHasInviteCode: function() {
				var invite_code = uni.getStorageSync('invite_code');
				return invite_code ? true : false;
				// return false;
			}
		},
		props: {
			templateIndex: {
				type: Number
			},
			isShowToolButton: {
				type: Boolean,
				default: true
			},

			item: {
				type: Object,
				default: {
					products: [{
						id: "",
						productName: "",
						imgSrc: ""
					}],
					templateTypeName: "四方格",
					template_type_id: ""
				}
			}

		},
		filters: {
			// getTitle(e) {

			// 	console.log(e)

			// 	var title = "四框格";
			// 	switch (e) {
			// 		case 1:
			// 			title = "四框格";
			// 			break;
			// 		case 2:
			// 			title = "轮播图";
			// 			break;
			// 		case 3:
			// 			title = "横向瀑布流";
			// 			break;
			// 		case 4:
			// 			title = "纵向瀑布流";
			// 			break;
			// 		default:
			// 			break;
			// 	}
			// 	return title;
			// }
		},
		watch: {

		},
		methods: {
			typeDetailClick(item, index) {
				var obj = {
					templateType: item.templateType,
					index,
					templateIndex: this.templateIndex,
					id: item.products[index].id
				};
				this.$emit('typeDetailClick', obj)

			},
			clickItem(e) {
				this.typeDetailClick(this.item, e.index)
			},
			deleteItem() {

				this.$emit('deleteItem', {
					templateIndex: this.templateIndex
				})

			},

			moveTop() {

				this.$emit('moveTop', {
					templateIndex: this.templateIndex
				})


			},
			moveDown() {

				this.$emit('moveDown', {
					templateIndex: this.templateIndex
				})


			},
			add() {

				this.$emit('add', {
					templateIndex: this.templateIndex
				})
			},

		}
	}
</script>

<style lang="scss">

</style>